<template>
    <div>
        <el-form ref="updateForm" :model="update" style="margin-left: 15px; margin-top: 10px;">
            <el-form-item label="标题:" prop="title">
                <el-input v-model="update.title" size="medium" placeholder="请输入标题" prefix-icon="el-icon-edit" clearable style="width: 35%;" @input="forceUpdate" />
            </el-form-item>
            <el-form-item label="发布人:" prop="author">
                <el-input v-model="update.author" size="medium" placeholder="请输入发布人姓名" prefix-icon="el-icon-edit" clearable style="width: 178px;" @input="forceUpdate" />
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <editor v-model="update.content" @input="forceUpdate" />
                <div class="preview" v-html="update.content" />
            </el-form-item>
        </el-form>
        <p style="display: inline-block; margin-left: 15px; color: #ff85c0;">是否对外公开：</p>
        <el-switch v-model="update.isPublish" active-color="#ff4949" />
        <span style="float: right;">
            <el-button @click="returnIndex">取消</el-button>
            <el-button type="update" style="margin-right: 20px;" @click="doUpdate">确认更新</el-button>
        </span>
    </div>
</template>

<script>
export default {
    name: 'AnnouncementUpdate',
    data() {
        return {
            update: {
                title: '',
                author: '',
                content: '',
                isPublish: false
            }
        }
    },
    created() {
        this.update = this.$route.query
        if (this.update.isPublish === 'true') {
            this.update.isPublish = true
        } else if (this.update.isPublish === 'false') {
            this.update.isPublish = false
        }
        if (this.update.isDel === 'true') {
            this.update.isDel = true
        } else if (this.update.isDel === 'false') {
            this.update.isDel = false
        }
        this.$forceUpdate() // 强制刷新
    },
    methods: {
        returnIndex() { // 取消返回页面
            this.$router.push({path: '/announcement/index'})
        },
        forceUpdate() {
            this.$forceUpdate()
        },
        doUpdate() { // 确认更新公告
            this.$refs['updateForm'].validate(valid => {
                if (valid) {
                    this.putRequest('/notice/update', this.update).then(resp => {
                        if (resp) {
                            this.$router.push({path: '/announcement/index'})
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-button--update {
    background-color: rgb(250, 136, 136);
    color: #f5f2f0;
}
</style>
